<template>
  <Header>
    <template v-slot:logo>
      <img src="@/assets/img/logo.png" alt="" />
    </template>
    <template v-slot:main>
      <div class="main__container">
        <span class="placeholder">寻找宝贝店铺</span>
        <span class="search">搜索</span>
      </div>
    </template>
    <template v-slot:signIn>
      <img src="@/assets/img/signin.png" alt="" />
    </template>
  </Header>
</template>

<script>
import Header from "@/common/header/index.vue";
export default {
  components: {
    Header,
  },
};
</script>

<style scoped>
.main__container {
  position: relative;

  width: 100%;
  height: 100%;
  border-radius: 40px;
  overflow: hidden;
  border: 4px solid #ff5000;
  font-size: 30px;
  background: white;
}
.placeholder {
  display: inline-block;
  padding: 20px;
  color: #666666;
  white-space: nowrap;
}
.search {
  position: absolute;
  width: 130px;
  height: 68px;
  text-align: center;
  line-height: 70px;
  top: 0;
  right: 2px;
  text-align: center;
  color: #fff;
  border-radius: 40px;
  background: linear-gradient(to right, #ff8d0e, #ff5000);
}
</style>